<template>
	<view>
		<u-navbar :is-back="false" title="">
			<view class="slot-wrap">
				<text class="u-flex-1">
					<u-icon name="arrow-left" size="40" @click="$u.route({type:'back'})"></u-icon>
				</text>
				<text class="u-font-34">喜欢的商品</text>
				<text class="u-flex-1 u-text-right">
					<text v-if="data.length" @click="changeEdit">{{edit}}</text>
				</text>
			</view>
		</u-navbar>
		<view class="u-p-20">
			<view class="u-flex" v-for="(item,index) in data" :key="index">
				<u-checkbox v-if="edit=='完成'" @change="checkboxChange" :name='index' shape="circle" v-model="item.checked"></u-checkbox>
				<w-shop-item class="u-flex-1" like :item='item'></w-shop-item>
			</view>
			<view class="" style="height: 50vh;" v-if="data.length==0">
				<u-empty text="暂无数据" mode="list"></u-empty>
			</view>
		</view>
		<view class="" v-if="edit=='完成' && data.length">
			<view class="" style="height: 100rpx;"></view>
			<view class="w-del-btn u-border u-m-t-30 u-p-t-20 u-p-b-20 u-p-l-10 u-p-r-10 u-flex u-row-between">
				<view class="u-flex u-flex-1">
					<u-checkbox class="u-flex-1" @change="allChange" shape="circle" v-model="allChecked">全选</u-checkbox>
					<u-button type="error" shape="circle" :disabled='disabled' @click='del'>删除</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		favoriteList,favoriteDislikeBatch
	} from '@/api/shop.js'
	import {
		$shopImgUrl
	} from '@/service/request.js'
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['login','userInfo'])
		},
		data() {
			return {
				edit: '管理',
				data:[],
				allChecked:false,
				disabled:true
			}
		},
		onLoad() {
			this.favoriteList()
		},
		watch: {
			data: {
				handler(val, oldVal) {
					this.disabled = true
					val.forEach(item => {
						if (item.checked) {
							this.disabled = false
						}
					})
				},
				deep: true
			}
		},
		methods: {
			del(){
				const arr = []
				this.data.forEach(item=>{
					if(item.checked){
						arr.push(item.id)
					}
				})
				const token = uni.getStorageSync('sessionid')
				favoriteDislikeBatch({
					idArr: arr,
					JSESSIONID: token
				}).then(res=>{
					this.favoriteList()
				})
			},
			checkboxChange(e){
				this.data[e.name].checked = e.value
				let count = 0
				this.disabled =true
				this.data.forEach(item=>{
					if(item.checked){
						count++
						this.disabled =false
					}
				})
				if(this.data.length==count){
					this.allChecked=true
				}else{
					this.allChecked=false
				}
			},
			allChange(e){
				this.data= this.data.map(item=>{
					return {
						...item,
						checked : e.value
					}
				})
				this.disabled = !e.value
			},
			favoriteList(){
				const token = uni.getStorageSync('sessionid')
				favoriteList({
					idUser: this.userInfo.id,
					JSESSIONID: token
				}).then(res=>{
					this.data = res.map(item=>{
						return {
							checked:false,
							src:$shopImgUrl+item.goods.pic,
							goodsId:item.goods.id,
							...item.goods,
							id:item.id
						}
					})
				})
			},
			changeEdit() {
				if (this.edit == '管理') {
					this.edit = '完成'
				} else {
					this.edit = '管理'
				}
			},
		}
	}
</script>

<style scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx;
	}
	.w-del-btn{
		position: fixed;
		width: 94%;
		bottom: 20rpx;
		left: 3%;
	}
</style>
